<template>
  <app-layout title="房间">
    <div class="room-container p-2">
      <div class="room-title">
        <el-button type="primary" @click="handleRoom(true)">新增房间</el-button>
        <el-button type="primary" plain @click="showGroup">分组管理</el-button>
      </div>
      <el-table :data="rooms" stripe style="width: 100%">
        <el-table-column type="index" label="序号" width="50" />
        <el-table-column label="房间" prop="name" />
        <el-table-column prop="group_id" label="房间分类">
          <template #default="scope">
            {{ getGroup(scope.row.group_id) }}
          </template>
        </el-table-column>
        <el-table-column prop="order_type" label="预订类型" width="120">
          <template #default="scope">
            <el-tag v-if="scope.row.order_type === 1">午晚市</el-tag>
            <el-tag type="danger" v-else>时间段</el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="140">
          <template #default="scope">
            <el-button
              type="primary"
              :icon="Edit"
              circle
              @click="handleRoom(false, scope.row)"
            ></el-button>
            <el-button
              type="danger"
              @click="removeRoom(scope.row.id)"
              :icon="Delete"
              circle
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog v-model="groupDialog" title="分组管理" width="350px">
        <el-tag
          v-for="group in groups"
          :key="group.id"
          closable
          :disable-transitions="false"
          @close="removeGroup(group.id)"
        >
          {{ group.name }}
        </el-tag>
        <el-input
          v-if="inputVisible"
          ref="saveTagInput"
          v-model="groupName"
          class="input-new-tag"
          size="mini"
          @keyup.enter="handleInputConfirm"
          @blur="handleInputConfirm"
        >
        </el-input>
        <el-button v-else class="button-new-tag" size="small" @click="showInput"
          >+ 新增分组
        </el-button>

        <template #footer>
          <span class="dialog-footer">
            <el-button @click="groupDialog = false">取消</el-button>
            <el-button type="primary" @click="groupDialog = false"
              >完成</el-button
            >
          </span>
        </template>
      </el-dialog>
      <el-dialog v-model="roomDialog" title="房间管理" width="350px">
        <el-form :model="form" ref="ruleForm">
          <el-form-item label="房间名" :label-width="labelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="分组" :label-width="labelWidth">
            <el-select v-model="form.group_id">
              <el-option
                v-for="group in groups"
                :key="group.id"
                :label="group.name"
                :value="group.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="预订类型" :label-width="labelWidth">
            <el-select v-model="form.order_type">
              <el-option label="午晚市" :value="1" />
              <el-option label="时间段" :value="2" disabled />
            </el-select>
          </el-form-item>
        </el-form>

        <template #footer>
          <span class="dialog-footer">
            <el-button @click="roomDialog = false">取消</el-button>
            <el-button type="primary" @click="submitRoom">确认</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </app-layout>
</template>
<script>
import { reactive, ref } from "vue";
import AppLayout from "@/Layouts/AppLayout.vue";
import { Inertia } from "@inertiajs/inertia";
import { ElMessage, ElMessageBox } from "element-plus";
import { Search, Edit, Delete } from "@element-plus/icons";

export default {
  name: "Room",
  props: ["rooms", "groups"],
  components: {
    AppLayout,
  },
  setup(props) {
    // 用于初始化的form
    // let tableData = reactive([
    //     {
    //         roomType: "包房",
    //         roomList: ["V1", "V2", "G1", "G2", "G3", "G5", "望江阁"],
    //     },
    // ]);
    const labelWidth = "100px";

    let form = reactive({
      id: null,
      name: null,
      group_id: null,
      order_type: null,
    });

    const groupDialog = ref(false);
    const groupName = ref("");
    const inputVisible = ref(false);
    const roomDialog = ref(false);

    // function handleClose(idx, tag) {
    //     tableData[idx].roomList.splice(tableData[idx].roomList.indexOf(tag), 1);
    // }

    function showGroup() {
      groupDialog.value = true;
    }

    /**
     * 打开房间管理dialog
     * @param isCreate
     */
    function handleRoom(isCreate = false, roomMsg) {
      roomDialog.value = true;
      if (isCreate) {
        for (let key in form) {
          form[key] = null;
        }
      } else {
        for (let key in form) {
          form[key] = roomMsg[key];
        }
      }
    }
    const removeGroup = (id) => {
      ElMessageBox.confirm("确定删除所选分组么？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          Inertia.delete(`/rooms/group?id=${id}`);
          ElMessage({
            type: "success",
            message: "删除成功",
          });
        })
        .catch(() => {
          // catch error
        });
    };
    const removeRoom = (id) => {
      ElMessageBox.confirm("确定删除所选房间么？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          Inertia.delete(`/rooms?id=${id}`);
          ElMessage({
            type: "success",
            message: "删除成功",
          });
          console.log(id);
        })
        .catch(() => {
          // catch error
        });
    };

    function getGroup(id) {
      let result = props.groups.filter(group => group.id === id);
        console.log(result);
      if (result.length > 0) {
        return result[0].name;
      } else {
        return "";
      }
    }

    /**
     * 提交表单的方法
     */
    function submitRoom() {
      Inertia.post("/rooms", form);
      ElMessage({
        type: "success",
        message: "操作成功",
      });
      roomDialog.value = false;
    }

    function handleInputConfirm() {
      const inputValue = groupName.value;
      if (inputValue) {
        Inertia.post("/rooms/group", { name: inputValue });
      }
      inputVisible.value = false;
      groupName.value = "";
    }

    return {
      //   tableData,
      Search,
      Edit,
      Delete,
      form,
      submitRoom,
      showGroup,
      getGroup,
      //   handleClose,
      groupDialog,
      labelWidth,
      removeGroup,
      handleRoom,
      handleInputConfirm,
      groupName,
      inputVisible,
      roomDialog,
      removeRoom,
    };
  },
  methods: {
    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
  },
};
</script>

<style scoped>
.tag-item {
  margin: 4px;
}

.room-title {
  text-align: right;
  margin: 10px 10px;
}

.el-tag + .el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
